<template>
  <div class="material-code-receiving-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>物料编码收料</span>
        </div>
      </template>

      <el-form :model="receiveForm" label-width="120px" class="receive-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="物料编码" required>
              <el-input
                v-model="receiveForm.materialCode"
                placeholder="请扫描或输入物料编码"
                @keyup.enter="handleScanMaterial"
              >
                <template #append>
                  <el-button @click="handleScanMaterial">扫描</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收料仓库" required>
              <el-select
                v-model="receiveForm.warehouse"
                placeholder="请选择仓库"
              >
                <el-option
                  v-for="item in warehouseOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商">
              <el-select
                v-model="receiveForm.supplier"
                filterable
                remote
                placeholder="请选择供应商"
              >
                <el-option
                  v-for="item in supplierOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 物料信息展示 -->
      <div v-if="materialInfo" class="material-info">
        <el-descriptions title="物料信息" :column="3" border>
          <el-descriptions-item label="物料编码">{{
            materialInfo.code
          }}</el-descriptions-item>
          <el-descriptions-item label="物料名称">{{
            materialInfo.name
          }}</el-descriptions-item>
          <el-descriptions-item label="规格型号">{{
            materialInfo.specification
          }}</el-descriptions-item>
          <el-descriptions-item label="单位">{{
            materialInfo.unit
          }}</el-descriptions-item>
          <el-descriptions-item label="批次">{{
            materialInfo.batch
          }}</el-descriptions-item>
          <el-descriptions-item label="库存量">{{
            materialInfo.stock
          }}</el-descriptions-item>
        </el-descriptions>

        <div class="receive-operation">
          <el-form :model="receiveForm" label-width="120px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="收料数量" required>
                  <el-input-number v-model="receiveForm.quantity" :min="1" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="批次号">
                  <el-input
                    v-model="receiveForm.batchNo"
                    placeholder="请输入批次号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="质检状态">
                  <el-select v-model="receiveForm.qcStatus">
                    <el-option label="合格" value="qualified" />
                    <el-option label="待检" value="pending" />
                    <el-option label="不合格" value="unqualified" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注">
              <el-input v-model="receiveForm.remark" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleReceive"
                >确认收料</el-button
              >
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 收料记录 -->
      <div class="receive-records">
        <div class="section-title">今日收料记录</div>
        <el-table :data="receiveRecords" border style="width: 100%">
          <el-table-column prop="materialCode" label="物料编码" />
          <el-table-column prop="materialName" label="物料名称" />
          <el-table-column prop="quantity" label="收料数量" />
          <el-table-column prop="warehouse" label="收料仓库" />
          <el-table-column prop="batchNo" label="批次号" />
          <el-table-column prop="qcStatus" label="质检状态">
            <template #default="scope">
              <el-tag :type="getQcStatusType(scope.row.qcStatus)">
                {{ getQcStatusText(scope.row.qcStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="receiveTime" label="收料时间" />
          <el-table-column prop="operator" label="操作人" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

const receiveForm = reactive({
  materialCode: "",
  warehouse: "",
  supplier: "",
  quantity: 1,
  batchNo: "",
  qcStatus: "qualified",
  remark: "",
});

const materialInfo = ref(null);
const warehouseOptions = [
  { label: "原料仓", value: "raw" },
  { label: "成品仓", value: "finished" },
];
const supplierOptions = [
  { label: "供应商A", value: "supplierA" },
  { label: "供应商B", value: "supplierB" },
];

const receiveRecords = ref([
  {
    materialCode: "M001",
    materialName: "物料A",
    quantity: 100,
    warehouse: "原料仓",
    batchNo: "B20240320001",
    qcStatus: "qualified",
    receiveTime: "2024-03-20 10:00:00",
    operator: "张三",
  },
]);

const handleScanMaterial = () => {
  if (!receiveForm.materialCode) {
    ElMessage.warning("请输入物料编码");
    return;
  }
  // 模拟获取物料信息
  materialInfo.value = {
    code: receiveForm.materialCode,
    name: "测试物料",
    specification: "规格型号",
    unit: "个",
    batch: "B001",
    stock: 1000,
  };
};

const getQcStatusType = (status) => {
  const statusMap = {
    qualified: "success",
    pending: "warning",
    unqualified: "danger",
  };
  return statusMap[status];
};

const getQcStatusText = (status) => {
  const statusMap = {
    qualified: "合格",
    pending: "待检",
    unqualified: "不合格",
  };
  return statusMap[status];
};

const handleReceive = () => {
  if (!materialInfo.value) {
    ElMessage.warning("请先扫描物料");
    return;
  }
  if (!receiveForm.warehouse) {
    ElMessage.warning("请选择收料仓库");
    return;
  }
  // 实现收料逻辑
  ElMessage.success("收料成功");
  handleReset();
};

const handleReset = () => {
  Object.assign(receiveForm, {
    materialCode: "",
    warehouse: "",
    supplier: "",
    quantity: 1,
    batchNo: "",
    qcStatus: "qualified",
    remark: "",
  });
  materialInfo.value = null;
};
</script>

<style scoped>
.material-code-receiving-container {
  padding: 20px;
}

.receive-form {
  margin-bottom: 20px;
}

.material-info {
  margin: 20px 0;
}

.receive-operation {
  margin-top: 20px;
}

.receive-records {
  margin-top: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}
</style>
